<!-- 账号设置 -->
<template>
  <div>
    <div class="header">
      <div class="avatar_box">
        <chat-avatar
          :size="180"
          :content="userInfo.avatar || userInfo.name"
        ></chat-avatar>
        <input
          v-show="false"
          type="file"
          @change="_handleChangeFile"
          :accept="`image/*`"
          ref="uploadAvatar"
        />
        <CropperImage
          ref="cropperImage"
          @handleUploadSuccess="handleUploadSuccess"
        />
        <el-button class="change-avatar_btn" @click="handleChangeAvatar" plain
          >更换头像</el-button
        >
      </div>
      <div class="right_box">
        <div class="item_box">
          <span class="label">用户名：</span>
          <span>{{ userInfo.username }}</span>
        </div>
        <div class="item_box">
          <span class="label">邮箱：</span>
          <span>{{ userInfo.email }}</span>
        </div>
        <div class="item_content">
          <span class="label">手机号：</span>
          <el-input
            v-model="userInfo.phone"
            v-input.arith
            size="mini"
            @change="handleContentChange"
            clearable
          ></el-input>
        </div>
        <div class="item_content">
          <span class="label">个性签名：</span>
          <el-input
            v-model="userInfo.bio"
            @change="handleContentChange"
            type="textarea"
            :rows="5"
            size="mini"
            clearable
          ></el-input>
        </div>
      </div>
    </div>
    <div class="footer_btn">
      <el-button class="btn" type="danger" @click="logout">退出登录</el-button>
    </div>
  </div>
</template>

<script>
import lockr from "lockr"
import chatAvatar from "../common/avatar.vue"
import CropperImage from "../common/CropperImage.vue"
import { useUploadFile } from "@/utils/minio"
import { logout, updateUserInfo } from "@/api/user"
import { mapState } from "vuex"

export default {
  components: { chatAvatar, CropperImage },
  data() {
    return {}
  },

  computed: {
    ...mapState(["userInfo"])
  },
  methods: {
    handleChangeAvatar() {
      this.$refs.uploadAvatar.click()
    },
    getFile(file) {
      this.$refs.cropperImage.handleOpen(
        file,
        { autoCropWidth: 200, autoCropHeight: 200 },
        { type: "fixed", sizeWidth: 200, sizeHeight: 200 }
      )
    },

    async handleUploadSuccess(val) {
      const res = await useUploadFile(val)
      this.userInfo.avatar = res
      this.handleContentChange()
    },

    async handleContentChange() {
      const res = await updateUserInfo(this.userInfo)
      if (res) {
        this.$message.success("修改成功")
        lockr.set("userInfo", this.userInfo)
      }
    },

    logout() {
      this.$confirm("确认退出登录吗？", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        const res = await logout()
        if (res) {
          console.log(res)
          // eslint-disable-next-line no-undef
          window.location.href = loginUrl
        }
      })
    },

    _handleChangeFile() {
      this.getFile(this.$refs.uploadAvatar.files[0])
    }
  }
}
</script>
<style lang="less" scoped>
.header {
  margin: 37px 0 0 55px;
  display: flex;
  // align-items: center;
  .right_box {
    font-size: 12px;
    color: #333;
    padding-left: 20px;
    width: 500px;
    .item_box {
      display: flex;
      align-items: center;
      padding-bottom: 12px;
      .label {
        color: #666;
      }
    }
    .item_content {
      display: flex;
      // align-items: center;
      padding-bottom: 5px;
      .label {
        width: 80px;
        color: #666;
      }
    }
  }
}

.change-avatar_btn {
  margin-top: 16px;
  width: 180px;
  height: 40px;
}

.footer_btn {
  text-align: center;
  margin-top: 180px;
  .btn {
    width: 180px;
    height: 40px;
  }
}
</style>
